'use strict'

import React from 'react'
import './index.less'
class Box extends React.Component {
    render() {
        const { title, height = '100%', width = '100%', children, bodyPaddingTop = 1, titlePaddingTop, margin, overflow } = this.props

        const headerbg = {
            background: 'url(/assets/images/homepage/bigscreen/headertitlebg.png) no-repeat',
            backgroundSize: '100% 100%',
        }
        return (
            <div style={{ height, width, margin: margin || "0px" }}>
                <div style={{
                    height: height, 
                    width: '100%',
                    listStyle: 'none', 
                    overflow: overflow || 'hidden',
                }}>
                    <div style={{ 
                        height: '3vh', 
                        paddingTop: '0.3vh', 
                        paddingLeft: '1vh', 
                        wordBreak: 'keep-all', 
                        whiteSpace: 'nowrap', 
                        width: '100%', 
                        ...headerbg, 
                    }}>
                        <img 
                            src="/assets/img/star.png" 
                            alt="star" 
                        />
                        <span className='card-title' style={{ fontSize: '1.8vh' }}>{title}</span>
                    </div>
                    <div style={{
                        height: 'calc(100% - 3vh)',
                        width: '100%',
                        backgroundImage: 'linear-gradient(181deg, #5b88ff00 0%, #0c38ac1f 98%)',
                        padding: '0.8vh',
                        boxSizing: 'border-box'
                    }}>
                        {children}
                    </div>
                </div>
            </div>
        )
    }
}
export default Box

